<template>
  <div class="app-container">
    <xm-table ref="xmtable" :url='url'>

      <template v-slot:actions>
        <el-button class="filter-item" type="primary" @click.native="exportTable">导出</el-button>
      </template>

      <template v-slot:search>
        <el-select v-model="where.status" placeholder="请选择" class="searchLine">
          <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
          </el-option>
        </el-select>

        <el-date-picker
                class="searchLine"
                v-model="where.time_frame"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
        </el-date-picker>

        <el-input v-model="where.key" placeholder="输入名称搜索" style="width: 200px;" class="filter-item" @keypress.enter.native="table.where(where)" />
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click.native="searchBtn">搜索</el-button>
      </template>

      <!--表格主内容-->
      <template v-slot:table="slotProps">
        <el-table
                :key="slotProps.tableKey"
                v-loading="slotProps.listLoading"
                :data="slotProps.list"
                border
                highlight-current-row
                style="width: 100%;"
        >
          <el-table-column label="单号">
            <template slot-scope="scope">
              {{ scope.row.order_number}}
            </template>
          </el-table-column>

          <el-table-column label="微信昵称" width="150px">
            <template slot-scope="scope">
              <span>{{ scope.row.member?scope.row.member.nickname:'-' }}</span>
            </template>
          </el-table-column>

          <el-table-column label="领取用户头像" width="120px">
            <template slot-scope="scope">
              <el-image
                      v-if="scope.row.member"
                      :src="scope.row.member.avatar_url"
                      fit="cover"
                      :preview-src-list="[scope.row.member.avatar_url]"
                      lazy
              >
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </template>
          </el-table-column>

          <el-table-column label="会员名" width="150px">
            <template slot-scope="scope">
              <span>{{ scope.row.member_name }}</span>
            </template>
          </el-table-column>

          <el-table-column label="返利金额" width="150px">
            <template slot-scope="scope">
              <span>{{ scope.row.money }}</span>
            </template>
          </el-table-column>

          <el-table-column label="店铺简称">
            <template slot-scope="scope">
              <span>{{ scope.row.store_name }}</span>
            </template>
          </el-table-column>

          <el-table-column label="下单平台">
            <template slot-scope="scope">
              <span>{{ scope.row.platform_name }}</span>
            </template>
          </el-table-column>

          <el-table-column label="已打款金额" width="150px">
            <template slot-scope="scope">
              <span>{{ scope.row.success_money }}</span>
            </template>
          </el-table-column>

          <el-table-column label="成功到账">
            <template slot-scope="scope">
              <span>{{ scope.row.success_money }}</span>
            </template>
          </el-table-column>

          <el-table-column label="状态">
            <template slot-scope="scope">
              <el-tag type="primary">
                <span v-if="+scope.row.status == 1">待处理</span>
                <span v-else-if="+scope.row.status == 2">已完成</span>
                <span v-else-if="+scope.row.status == 3">已拒绝</span>
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
            <template slot-scope="{row}">
              <el-button type="primary" size="mini" @click="handleEdit(row)">
                编辑
              </el-button>

            </template>
          </el-table-column>
        </el-table>
      </template>
    </xm-table>

    <!--新增/编辑弹窗-->
    <el-dialog :visible.sync="isAddModalShow">
      <el-form ref="dataForm"
               :model="sizeForm"
               label-position="left"
               label-width="100px"
      >
        <el-form-item label="状态">
          <el-tag>{{['','待处理','已完成','已拒绝'][orderList.status]}}</el-tag>
        </el-form-item>

        <el-form-item label="订单号">
          <el-input v-model="orderList.order_number" disabled/>
        </el-form-item>

        <el-form-item label="佣金金额" prop="money">
          <el-input v-model="sizeForm.money" type="number" />
        </el-form-item>

        <el-form-item label="打款方式" prop="money">
          <el-button type="info" @click="createdData(3)">拒绝</el-button>
          <el-button type="warning" @click="createdData(0)">打款并保持状态</el-button>
          <el-button type="success" @click="createdData(1)">打款并完成</el-button>
          <el-button type="primary" @click="createdData(2)">完成</el-button>
        </el-form-item>

        <template>
          <el-table
                  :data="orderList.orderList"
                  v-loading="loading"
                  style="width: 100%"
          >
            <el-table-column label="金额" prop="total_amount"></el-table-column>

            <el-table-column label="金额" prop="mch_billno" width="250"></el-table-column>

            <el-table-column label="状态" prop="step" width="100">
              <template  slot-scope="scope">
                <el-tag>{{['','待处理','已打款','打款失败'][scope.row.step]}}</el-tag>
              </template>
            </el-table-column>

            <el-table-column label="创建时间" prop="create_time"></el-table-column>

            <el-table-column class-name="small-padding fixed-width" label="操作" align="center" width="100" prop="step">
              <template slot-scope="scope" v-if="scope.row.step == 1 || scope.row.step == 3">
                <el-button type="primary" size="small" @click="refishOrder(scope.row.order_id)">重试打款</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import xmTable from "@/components/xmTable"
  //import { constants } from 'fs';

  export default {
    name: 'projectList',
    components: {
      xmTable,
    },
    data() {
      return {
        url: api.formPraise,     //请求地址
        table: {},            //获取table内部方法
        where: {              //搜索用关键字
          key: '',
          status: '',
          time_frame: ''
        },
        options: [
          { value: '0', label: '全部' },
          { value: '1', label: '待处理' },
          { value: '2', label: '已完成' },
          { value: '3', label: '已拒绝' }
        ],
        nowId: 0,              //当前id
        isAddModalShow: false, //弹窗控制

        sizeForm: {
          money: 0,
          status: 0,
          time_frame: ''
        },
        orderList: [],
        loading: false
      }
    },
    created() {
      const vm = this;
      //vm.getprojectItem()
    },
    mounted() {
      const vm = this;
      vm.table = vm.$refs.xmtable
    },
    computed: {

    },
    methods: {
      // 获取数据接口
      async getProject(id) {
        id = id || '0'
        const vm = this
        let url = api.formPraise + '/' + id + '/edit'
        vm.loading = true
        vm.$axios.get(url)
                .then((res) => {
                  vm.orderList = res
                  vm.sizeForm.money = res.money
                  vm.sizeForm.status = res.status
                  setTimeout(()=> {
                    vm.loading = false
                  },1000)
                })
      },
      // 提交/修改 数据接口
      createdData(status) {
        const vm = this
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            const postData = JSON.parse(JSON.stringify(vm.sizeForm))    //静态data
            postData.status = status
            const id = vm.nowId                 //判断是否编辑
            let method = 'post'
            let url = api.formPraise
            if (id) {
              url = url + '/' + id
              method = 'put'
            }
            vm.$axios[method](url, postData)
                    .then((res) => {
                      vm.table.reset()
                      vm.table.getList()
                      vm.$message({
                        message: "成功",
                        type: 'success'
                      })
                      vm.getProject(vm.nowId)
                    })
          }
        })
      },
      // 重试订单列表
      refishOrder(order_id) {
        const id = order_id || '0'
        const vm = this
        let url = api.order + '/' + id
        vm.$axios.put(url)
                .then((res) => {
                  vm.getProject(vm.nowId)
                })
      },
      //编辑
      async handleEdit(row) {
        const vm = this
        let id = row.form_id
        vm.nowId = id
        vm.resetForm()
        await vm.getProject(id)
        vm.isAddModalShow = true
      },

      // 导出
      exportTable() {
        const vm = this
        var _auth = window.localStorage.authorization
        var start_time = vm.where.time_frame[0] ? new Date(vm.where.time_frame[0]).format('yyyy/MM/dd') : ''
        var end_time = vm.where.time_frame[1] ? new Date(vm.where.time_frame[1]).format('yyyy/MM/dd') : ''
        let url = api.formOrder + '/excel?start_order_time=' + start_time + '&end_order_time=' + end_time + '&authorization=' + _auth
        window.open(url)
      },

      // 表格搜索
      searchBtn() {
        const vm = this
        var postData = {
          key: vm.where.key,
          status: vm.where.status,
          start_order_time: vm.where.time_frame[0] ? new Date(vm.where.time_frame[0]).format('yyyy/MM/dd') : '',
          end_order_time: vm.where.time_frame[1] ? new Date(vm.where.time_frame[1]).format('yyyy/MM/dd') : ''
        }
        vm.table.where(postData)
      },

      resetForm() {
        const vm = this
        vm.sizeForm = {
          money: 0,
          status: 0
        }
      }
    }
  }
</script>

<style scoped>
  .searchLine {
    margin-bottom:10px;
    vertical-align: middle;
  }
  .btnLink {
    display: block;
    width:100%;
  }
</style>
